<style include="diagnostics-shared">
  .error {
    background-color:
        rgba(var(--google-red-600-rgb), var(--cros-second-tone-opacity));
    color: var(--cros-text-color-alert);
  }

  .queued,
  .skipped,
  .stopped {
    background-color:
        rgba(var(--google-grey-600-rgb), var(--cros-second-tone-opacity));
    color: var(--cros-text-color-secondary);
  }

  .running {
    background-color:
        rgba(var(--google-blue-600-rgb), var(--cros-second-tone-opacity));
    color: var(--cros-text-color-prominent);
  }

  .success {
    background-color:
        rgba(var(--google-green-600-rgb), var(--cros-second-tone-opacity));
    color: var(--cros-text-color-positive);
  }

  .warning {
    background-color:
        rgba(var(--google-yellow-300-rgb), var(--cros-second-tone-opacity));
    color: var(--cros-text-color-warning);
  }

  #textBadge {
    @apply --diagnostics-text-badge-font;
    border-radius: 4px;
    height: 20px;
    letter-spacing: .8px;
    line-height: 16px;
    padding: 2px 6px;
    text-transform: uppercase;
    white-space: nowrap;
  }

  @media (prefers-color-scheme: dark) {
    .error {
      background-color:
          rgba(var(--google-red-300-rgb), var(--cros-second-tone-opacity));
      color: var(--google-red-200);
    }

    .queued,
    .skipped,
    .stopped {
      background-color:
          rgba(var(--google-grey-300-rgb), var(--cros-second-tone-opacity));
      color: var(--google-grey-200);
    }

    .running {
      background-color:
          rgba(var(--google-blue-300-rgb), var(--cros-second-tone-opacity));
      color: var(--cros-text-color-prominent);
    }

    .success {
      background-color:
          rgba(var(--google-green-300-rgb), var(--cros-second-tone-opacity));
      color: var(--google-green-200);
    }

    .warning {
      color: var(--google-yellow-200);
    }
  }
</style>

<span id="textBadge" class$="[[badgeType]]" hidden$="[[hidden]]">[[value]]</span>
